<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import RoleForm from './role-form.vue'
const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'save-success'): void//新增保存 修改保存 成功回调
}>()
const props = defineProps({
    //是否显示
    visible: {
        type: Boolean,
        default: false
    },
})

const OrgRoleFormRef = ref();

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val;
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
})

const OrgRoleFormDialogState = reactive({
    handleClose: () => {
        visibleModelValue.value = false;
    },
    //触发表单保存
    onOkButtonClick: () => {
        OrgRoleFormRef.value.save();
    },
    //表单保存成功事件
    onSaveSuccess: () => {
        emit("save-success")
        visibleModelValue.value = false
    }
})

</script>

<template>
    <div class="jxtech-dialog-form">
        <el-dialog
            v-model="visibleModelValue"
            title="角色与权限"
            width="60%"
            destroy-on-close
            :before-close="OrgRoleFormDialogState.handleClose"
        >
            <role-form ref="OrgRoleFormRef" @add-success="OrgRoleFormDialogState.onSaveSuccess"></role-form>
            <template #footer>
                <jxtech-cancel-button @click="OrgRoleFormDialogState.handleClose"></jxtech-cancel-button>
                <jxtech-ok-button @click="OrgRoleFormDialogState.onOkButtonClick"></jxtech-ok-button>
            </template>
        </el-dialog>
    </div>
</template>